// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由
import { createRouter, createWebHistory } from 'vue-router'

// 先引入页面组件 再写路由，然后去页面写路由出口
// 一级页面
import Layout from "@/views/Layout/index.vue"
import Login from "@/views/Login/index.vue"
// 二级页面
import Home from "@/views/Home/index.vue" 
import Category from "@/views/Category/index.vue" 
import subCategory from '@/views/SubCategory/index.vue'
import Detail from '@/views/Detail/index.vue'




const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // 一级路由
    {
      path:'/',
      component:Layout,
      // 二级路由是一级路由的子路由, 在一级页面也要加入路由出口
      children:[
        {
          path:'',
          component:Home
        },
        {
          // 因为要求路径后面还有id
          path:'/category/:id',
          component:Category
        },
        {
          // 二级路由分类部分
          path:'category/sub/:id',
          component:subCategory
        },
        {
          // 二级路由  商品分类点进去的详情页
          path:'/detail/:id',
          component:Detail
        }
      ]
    },
    {
      path:'/login',
      component:Login
    }
  ],
  // 这里配置 路由行为滚动配置  就是说 当前页面滑到某个位置 切换页面到其他路由后 不在这个位置 而是显示顶部
  // 这是vue-router里的一个方法
  scrollBehavior () {
    return{
      top: 0
    }
  }

})


export default router
